<template>
	<view class="page">
		<view>
		<!-- <text >订单信息</text> -->
		</view>	
		<view class="order-status">
			<view class="order-status-item" v-for="(item, index) in orderStatus" :key="index" @click="statusClick(index)">
					<text :style="statusIndex == index? 'color: #FEB147':''"  >{{item}}</text>
					<view class="line" v-if="statusIndex == index"></view>
			</view>
		</view>
		<view class="order-status1"></view>
		<!-- 待付款 -->
		<view class="not-pay" v-if="statusIndex == 0" v-for="(order,index) in getorderInfo" :ley="index" :key="index">
			<view class="goods-status">
				<text class="date">{{order.create_time}}</text>
				<text class="status">状态：<text style="color: #FD4D4D;">{{order.order_statustitle}}</text></text>
			</view>	
			<view class="goods-info">
				<view class="goods-item" v-for="(bizpro,index) in order.bizpro_arr" :ley="index" :key="index">
					<text class="goods-name">{{bizpro.bizpro_name}}</text>
					<text class="size">{{bizpro.bizpro_spec_value}}</text>
					<text class="price">¥ {{bizpro.price}}<text style="margin-left: 40rpx; color: #999999; font-size: 22rpx;">×{{bizpro.buy_num}}</text></text>
				</view>
			</view>
			
			<view class="operation">
				<text class="total-price">合计金额：<text style="color: #FF4E4C;">¥{{order.total_price}}</text></text>
				<view class="cancel-order">
					<text @click="cancelOrder(order.mo_id)">取消订单</text>
				</view>
				<view class="go-pay" @click="getOrderConfirm(order.mo_id)">
					<text>去付款</text>
				</view>
			</view>
		</view>
		<!--待发货 -->
		<view class="not-pay" v-if="statusIndex == 1" v-for="(order,index) in getorderInfo" :ley="index" :key="index">
			<view class="goods-status">
				<text class="date">{{order.create_time}}</text>
				<text class="status">状态：<text style="color: #FD4D4D;">{{order.order_statustitle}}</text></text>
			</view>	
			<view class="goods-info">
				<view class="goods-item">
					<text class="goods-name">{{order.bizpro_name}}</text>
					<text class="size">{{order.bizpro_spec_value}}</text>
					<text class="price">¥ {{order.price}}<text style="margin-left: 40rpx; color: #999999; font-size: 22rpx;">×{{order.buy_num}}</text></text>
				</view>
			</view>
			
			<view class="operation">
				<text class="total-price">合计金额：<text style="color: #FF4E4C;">¥ {{order.tprice}}</text></text>
				<view class="cancel-order" >
					<text @click="toOrderDetail(order.mo_id)">查看详情</text>
				</view>
				<view class="go-pay" v-if="order.send_notice == 1">
					<text  @click="toRemindSend(order.mod_id,2)">提醒发货</text>
				</view>
				<view class="go-pay" v-if="order.send_notice == 2">
					<text>已提醒</text>
				</view>
			</view>
		</view>
		<!-- 运输中 -->
		<view class="not-pay" v-if="statusIndex == 2" v-for="(order,index) in getorderInfo" :ley="index" :key="index">
			<view class="goods-status">
				<text class="date">{{order.create_time}}</text>
				<text class="status">状态：<text style="color: #FD4D4D;">{{order.order_statustitle}}</text></text>
			</view>	
			<view class="goods-info">
				<view class="goods-item">
					<text class="goods-name">{{order.bizpro_name}}</text>
					<text class="size">{{order.bizpro_spec_value}}</text>
					<text class="price">¥ {{order.price}}<text style="margin-left: 40rpx; color: #999999; font-size: 22rpx;">×{{order.buy_num}}</text></text>
				</view>
			</view>
			
			<view class="operation">
				<text class="total-price">合计金额：<text style="color: #FF4E4C;">¥ {{order.tprice}}</text></text>
				<view class="cancel-order" @click="toOrderlogistic(order.mod_id)">
					<text >查看物流</text>
				</view>
				<view class="go-pay" @click="toOrderConfirm(order.mod_id)">
					<text>确认收货</text>
				</view>
			</view>
			<!-- 物流信息提示弹窗 -->
			<post-info v-if="postPopup" :closeBtn="closePop" :mod_id="order.mod_id"></post-info>
		</view>
		<!-- 历史订单 -->
		<view class="not-pay" v-if="statusIndex == 3" v-for="(order,index) in getorderInfo" :ley="index" :key="index" >
			<view class="goods-status">
				<text class="date">{{order.create_time}}</text>
				<text class="status">状态：<text style="color: #FD4D4D;">{{order.order_statustitle}}</text></text>
			</view>	
			<view class="goods-info">
				<view class="goods-item">
					<text class="goods-name">{{order.bizpro_name}}</text>
					<text class="size">{{order.bizpro_spec_value}}</text>
					<text class="price">¥ {{order.price}}<text style="margin-left: 40rpx; color: #999999; font-size: 22rpx;">×{{order.buy_num}}</text></text>
				</view>
			</view>
			
			
		
			<view class="operation">
				<text class="total-price">合计金额：<text style="color: #FF4E4C;">¥{{order.tprice}}</text></text>
				<view class="go-pay" style="margin-left: 220rpx;">
					<text>已签收</text>
				</view>
			</view>
		</view>
		<view class="meiyou" v-if="meiyou==1">暂无数据 ~</view>
	</view>
</template>

<script>
	import PostInfo from '@/components/PostInfo';
	import ComHeader from '@/components/ComHeader';
	export default {
		 onLoad: function(options) {
			
			 
			this.statusIndex =options.status;
			this.statusClick(options.status);
			
			
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			//分享参数头url
			let url = this.$api.headurl
			this.$hshare.gethShareParam(url+'/#/pages/order/NotPay?status='+this.statusIndex)
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
		 	//调用需要的方法 
		 	// this.toOrderList(this.orderType);
		 },
		data() {
			return {
				orderStatus: ['待付款', '待发货', '运输中', '历史'],
				statusIndex: 0,
				postPopup: false,
				orderType:0,
				getorderInfo:[],
				meiyou:0,
			}
		},
		onBackPress(options) {
		    uni.switchTab({
		    	url:'/pages/my/Login'
		    })
			return true;
		},
		methods: {
			//在订单列表 页 点击 订单类型
			statusClick(index) {
				this.statusIndex = index;
				//订单类型
				if(this.statusIndex == 0){
					//待付款
					this.orderType = 1;
				}else if(this.statusIndex == 1){
					//待发货
					this.orderType = 2;
				}else if(this.statusIndex == 2){
					//运输中
					this.orderType = 3;
				}else if(this.statusIndex == 3){
					//历史
					this.orderType = 4;
				}
				this.getorderInfo=[]
				//调用需要的方法 
				this.toOrderList(this.orderType);
			},
			backFunction(){
				var pages = getCurrentPages(); // 当前页面
				var beforePage = pages[pages.length - 2]; // 前一个页面
				if(beforePage.route=="pages/pay/PaySuccess"){
					uni.switchTab({
						url:'/pages/my/Login'
					})
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
			},
			closePop() {
				this.postPopup = false;
			},
			//去付款 跳到订单确认页
			getOrderConfirm(order_id) {
				console.log(order_id)
				uni.navigateTo({
					url: '/pages/order/OrderConfirm?order_id='+order_id
				})
			},
			//确认收货 修改状态
			toOrderConfirm(odetail_id) {
				this.$api.toOrderConfirm({odetail_id:odetail_id}).then(res => {
					if(res.data.status == true){
						uni.showToast({
						   title:'收货成功' ,		
						})
						setTimeout(function(){
							//跳转到待发货
							uni.navigateTo({
								url: '/pages/order/NotPay?status=2'
							})
						},1000)
					}else{
						uni.showToast({
						   title:'暂无数据' ,
													
						})
					}
					
				})
			},
			//查看订详情
			toOrderDetail(order_id) {
				uni.navigateTo({
					url: '/pages/order/OrderDetail?order_id='+order_id
				})
			},
			//提醒发货
			
			toRemindSend(orderdetail_id,send_notice) {
				var t= this
				this.$api.getSaveInfo({order_id:orderdetail_id,send_notice:send_notice}).then(res => {
					if(res.data.status == true){
						uni.showToast({
						   title:'提醒发货成功' ,
													
						})
						setTimeout(function(){
								//跳转到待发货
								uni.navigateTo({
									url: '/pages/order/NotPay?status=1'
								})
							},1000)
						
						// this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
					}else{
						uni.showToast({
						   title:'暂无数据' ,
													
						})
					}
					
				})
			},
			//查看物流
			toOrderlogistic() {
				this.postPopup = !this.postPopup;
			
			},
			//取消订单
			cancelOrder(mo_id) {
				//连接口
				this.$api.getcancelOrder({order_id:mo_id}).then(res => {
					if(res.data.status == true){
						this.statusClick(0)
						uni.showToast({
						   title:'取消订单成功' ,
													
						})
						this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
					}else{
						uni.showToast({
						   title:'取消订单失败' ,
													
						})
					}
					
				})
			},
			
			
			//请求订单列表 根据状态判断类型
			toOrderList(type) {
				this.meiyou=0;
				if(type == 1){
					//待付款 
					
					//连接口
					this.$api.getMineorderList({type:type}).then(res => {
						if(res.data.status == true){
							this.getorderInfo = res.data.data;
							if(res.data.data.length==0){
								this.meiyou=1;
							}
							
						}else{
							this.meiyou=1;
							
						}
						
					})
					
				}else{
					//待发货 运输中 完成历史
					//连接口
					this.$api.getMineOrder({type:type}).then(res => {
						if(res.data.status == true){
							this.getorderInfo = res.data.data;
							console.log(res.data.data)
							if(res.data.data.length==0){
								this.meiyou=1;
							}
							console.log(res.data.data);
						}else{
							this.meiyou=1;
						}
						
					})
					
				}
			}
		},
		components: {
			PostInfo,
			ComHeader
		}
	}
</script>

<style>

	.page {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 120rpx);
		padding-top: (--status-bar-height);
		background-color: #f7f7f7;
	}
	.order-status {
		position: fixed;
		z-index: 100;
		display: flex;
		justify-content: space-around;
		width: 750rpx;
		height: 88rpx;
		/* line-height: 88rpx; */
		background: rgba(255,255,255,1);
		box-shadow:0rpx 3rpx 7rpx 0rpx rgba(191,191,191,0.54);
	}
	.order-status-item {
		width: 100rpx;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.order-status-item text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-top: 24rpx;
	}
	.order-status1{
		width:100%;
		height:90rpx;
		/* float:left; */
	}
	.line {
		position: absolute;
		margin-top: 30rpx;
		width: 50rpx;
		height: 6rpx;
		background: rgba(254,177,71,1);
		border-radius: 2rpx;
		/* margin-top: -10rpx; */
		/* margin-left: 20rpx; */
	}
	.not-pay {
		position: relative;
		width: 690rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
		background:rgba(255,255,255,1);
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(250,250,250,0.55), 0px 4px 8px 0px rgba(204,204,204,0.2);
		border-radius: 20rpx;
	}
	.date {
		position: absolute;
		top: 14rpx;
		left: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:rgba(153,153,153,1);
	}
	.goods-status {
		width: 690rpx;
		height: 60rpx;
		border-bottom: #F1F1F1 1rpx solid;
	}
	.status {
		position: absolute;
		right: 30rpx;
		top: 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.goods-info {
		width: 690rpx;
		margin-top: 20rpx;
	}
	.goods-item {
		position: relative;
		width: 690rpx;
		height: 120rpx;
		overflow: auto;
	}
	.goods-name {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-left: 30rpx;
		margin-top: 15rpx;
		width: 600rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.size {
		position: absolute;
		top: 70rpx;
		width: 400rpx;
		left: 30rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}
	.price {
		position: absolute;
		top: 70rpx;
		right: 30rpx;
		font-size:24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254,177,71,1);
	}
	.operation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 690rpx;
		height: 108rpx;
		position: relative;
		border-top: #F1F1F1 solid 1rpx;
	}
	.total-price {
		position: absolute;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		width: 250rpx;
		left: 30rpx;
		color: rgba(153,153,153,1);
	}
	.cancel-order {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 146rpx;
		height: 46rpx;
		border:1rpx solid rgba(102,102,102,1);
		border-radius: 24rpx;
		margin: 0 10rpx;
	}
	.cancel-order text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.go-pay {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 146rpx;
		height: 46rpx;
		border:1rpx solid rgba(255,148,0,1);
		background:rgba(255,148,0,1);
		border-radius:24px;
		margin-right: 20rpx;
	}
	.go-pay text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
	.meiyou{
		width:100%;
		height:120px;
		line-height:120px;
		text-align:center;
		font-size:14px;
		color:#999;
		/* background-color: #fff; */
	}
</style>
